import { useEffect, useState } from 'react';
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
import type { WebviewWindow } from '@tauri-apps/api/webviewWindow';
import MacControls from './MacControls';
import GenericControls from './GenericControls';
import macStyles from './MacControls.module.css';
import genericStyles from './GenericControls.module.css';
import styles from './TopBar.module.css';

const TopBar = () => {

    console.log("Topbar running ok")
    // 初始化 appWindow（替代 Svelte 的 let appWindow）
    // @ts-ignore
    const [appWindow, setAppWindow] = useState<WebviewWindow>({
        close: async () => { },
        minimize: async () => { },
        maximize: async () => { },
        unmaximize: async () => { },
        isMaximized: async () => false,
    });
    // 管理 barType（替代 Svelte 的 let barType）
    const [barType, setBarType] = useState<'mac' | 'generic' | 'hidden'>('generic');
    const [noSideEffect, setNoSideEffect] = useState(false);

    useEffect(() => {
        // 1. 判断环境：是否为 Tauri、是否为移动设备
        const isTauri = '__TAURI_INTERNALS__' in window;
        const userAgent = navigator.userAgent || '';
        const isMobile = /Android|iPhone|iPad|iPod/i.test(userAgent);
        setNoSideEffect(isMobile || !isTauri);

        // 2. 非 Tauri 环境隐藏控制栏
        if (!isTauri) {
            setBarType('hidden');
            return;
        }

        // 3. 加载 Tauri 窗口实例（替代 Svelte 的 import("@tauri-apps/api/webviewWindow")）
        const loadTauriWindow = async () => {
            try {
                const window = getCurrentWebviewWindow();
                setAppWindow(window);
            } catch (e) {
                console.error('Failed to load Tauri window:', e);
            }
        };
        loadTauriWindow();

        // 4. 判断平台：Mac 或其他
        const platform = navigator.platform || '';
        if (platform.includes('Mac')) {
            setBarType('mac');
        } else {
            setBarType('generic');
        }
    }, []); // 空依赖数组：仅在组件挂载时执行一次

    // 5. 条件渲染（替代 Svelte 的 {#if barType !== "hidden"}）
    if (barType === 'hidden') return null;

    return (
        <div className={styles.titlebar} data-tauri-drag-region>
            {/* 渲染 Mac 控制栏 */}
            {barType === 'mac' && (
                <MacControls
                    appWindow={appWindow}
                    noSideEffect={noSideEffect}
                    // @ts-ignore
                    className={macStyles.controls}
                />
            )}

            {/* 拖拽区域（Logo） */}
            <div className={styles.drag} data-tauri-drag-region>
                {/* 替换为你的 Logo 路径（React 中需用 import 或 public 目录路径） */}
                <img src="/assets/dots.svg" alt="logo" width="18" />
            </div>

            {/* 渲染通用控制栏 */}
            {barType === 'generic' && (
                <GenericControls
                    appWindow={appWindow}
                    noSideEffect={noSideEffect}
                    // @ts-ignore
                    className={genericStyles.controls}
                />
            )}
        </div>
    );
};

export default TopBar;
